{% extends "base.html" %}

{% block ext_styles %}
    <style type="text/css">
        #mynetwork {
            width: 1080px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>
{% endblock %}


{% block ext_scripts %}


{% endblock %}

{% block content %}
    <div class="container">
    {% include 'message.html' %}
    <i class="fa fa-television" style="visibility:hidden;"> </i>
    <div id="mynetwork"></div>
    </div>



    <script src="/static/js/vis-network.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        // create an array with nodes
        {#var shape_map = {#}
        {#    'StartNode': 'circle',#}
        {#    'ERPNode': 'box',#}
        {#    'UserNode': 'box',#}
        {#    'RoleNode': 'box',#}
        {#    'AndNode': 'circle',#}
        {#    'OrNode': 'circle',#}
        {#    'EndNode': 'box', };#}
        var node_data ={{ nodes|tojson }};
        {#for (var i = 0; i < node_data.length; i = i + 1) {#}
        {#    node_data[i]['shape'] = shape_map[node_data[i]['shape']]; }#}
        var edge_data ={{ edges|tojson }};
        var nodes = new vis.DataSet(node_data);
        var edges = new vis.DataSet(edge_data);

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
            nodes: nodes,
            edges: edges,
        };

        var options = {
            edges: {
                arrows: {
                    to: {enabled: true, scaleFactor: 0.5, type: 'arrow'},
                },
            },
            nodes: {

                {#size: 30,#}
                font: {
                    size: 15,
                },
                borderWidth: 2,
                {#shadow: true,#}
            },
            interaction: {hover: true},
            manipulation: {
                enabled: true,
            },
            groups: {
                RoleNode: {
                    shape: "icon",
                    icon: {
                        face: "'FontAwesome'",
                        code: "\uf234",
                        size: 30,
                        color: "#4169E1",
                    },
                },
                UserNode: {
                    shape: "icon",
                    icon: {
                        face: "'FontAwesome'",
                        code: "\uf007",
                        size: 30,
                        color: "#66CDAA",
                    },
                },
                StartNode: {
                    shape: "icon",
                    icon: {
                        face: "'FontAwesome'",
                        code: "\uf1c9",
                        size: 30,
                        color: "#FF7F50",
                    },
                },
                EndNode: {
                    shape: "icon",
                    icon: {
                        face: "'FontAwesome'",
                        code: "\uf28d",
                        size: 30,
                        color: "#CD853F",
                    },
                },
                OrNode: {
                    shape: "icon",
                    icon: {
                        face: "'FontAwesome'",
                        code: "\uf056",
                        size: 30,
                        color: "#5F9EA0",
                    },
                },
                AndNode: {
                    shape: "icon",
                    icon: {
                        face: "'FontAwesome'",
                        code: "\uf0fe",
                        size: 30,
                        color: "#9ACD32",
                    },
                },
                ERPNode: {
                    shape: "icon",
                    icon: {
                        face: "'FontAwesome'",
                        code: "\uf1b2",
                        size: 30,
                        color: "#9370DB",
                    },
                },
            },
        };

        var network = new vis.Network(container, data, options);

        network.on("click", function (params) {
            params.event = "[original event]";

            console.log(
                "click event, getNodeAt returns: " +
                this.getNodeAt(params.pointer.DOM)
            );
        });
        network.on("doubleClick", function (params) {
            params.event = "[original event]";

        });
        network.on("oncontext", function (params) {
            params.event = "[original event]";

        });
        network.on("dragStart", function (params) {
            // There's no point in displaying this event on screen, it gets immediately overwritten
            params.event = "[original event]";
            console.log("dragStart Event:", params);
            console.log(
                "dragStart event, getNodeAt returns: " +
                this.getNodeAt(params.pointer.DOM)
            );
        });
        network.on("dragging", function (params) {
            params.event = "[original event]";

        });
        network.on("dragEnd", function (params) {
            params.event = "[original event]";

            console.log("dragEnd Event:", params);
            console.log(
                "dragEnd event, getNodeAt returns: " +
                this.getNodeAt(params.pointer.DOM)
            );
        });
        network.on("controlNodeDragging", function (params) {
            params.event = "[original event]";

        });
        network.on("controlNodeDragEnd", function (params) {
            params.event = "[original event]";

            console.log("controlNodeDragEnd Event:", params);
        });
        network.on("zoom", function (params) {

        });
        network.on("showPopup", function (params) {

        });
        network.on("hidePopup", function () {
            console.log("hidePopup Event");
        });
        network.on("select", function (params) {
            console.log("select Event:", params);
        });
        network.on("selectNode", function (params) {
            console.log("selectNode Event:", params);
        });
        network.on("selectEdge", function (params) {
            console.log("selectEdge Event:", params);
        });
        network.on("deselectNode", function (params) {
            console.log("deselectNode Event:", params);
        });
        network.on("deselectEdge", function (params) {
            console.log("deselectEdge Event:", params);
        });
        network.on("hoverNode", function (params) {
            console.log("hoverNode Event:", params);
        });
        network.on("hoverEdge", function (params) {
            console.log("hoverEdge Event:", params);
        });
        network.on("blurNode", function (params) {
            console.log("blurNode Event:", params);
        });
        network.on("blurEdge", function (params) {
            console.log("blurEdge Event:", params);
        });
    </script>
{% endblock %}